<template>
	<view class="outBox">
		<view class="bg">
			<image :src="`${baseImgUrl}homeBg.png`" mode="scaleToFill"></image>
		</view>
		<Header bgColor="#000">
			<view class="header" :style="{height:barHeight + 'px'}">
				<view class="iconMsg" >
					<image src="../../static/home/img1.png" mode="widthFix"></image>
				</view>
				<!-- <view class="name" @click="getnav('/pages/manager/index')">
					客户经理
				</view> -->
			</view>
		</Header>
		<view class="bigBanner" :style="{
			marginTop:menuHeight - 90 + 'px'
		}">
			<image src="../../static/home/img2.png" mode="widthFix"></image>
		</view>
	<!-- 	<view class="swiperBox" :style="{
			marginTop:menuHeight + 'px'
		}">
			<u-swiper indicatorMode="dot" showTitle keyName="bannerPicPath" :indicator="true" height="280"
				:list="bannerList" @change="e => current = e.current" :autoplay="false"></u-swiper>
		</view> -->


		<view class="content">
			<view class="title">
				FOMOCLUB
			</view>
			<view class="btns">
				<view class="btn" @click="getnav('/pages/distribution/index')">
					<image class="bg" :src="`${baseImgUrl}home_btnBg.jpg`" mode="aspectFill"></image>
					<view class="tit">
						分销中心
					</view>
					<view class="text">
						在空闲的时候，约上三五好友一起赚钱
					</view>
					<!-- 	<view class="icon">
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view> -->
				</view>
				<!-- @click="getnav('/pages/order/scan')" -->
				<view class="btn" @click="doScan()">
					<image class="bg" :src="`${baseImgUrl}home_btnBg.jpg`" mode="aspectFill"></image>
					<view class="tit">
						扫码点单
					</view>
					<view class="text">
						通过扫描桌子上的二维码来点单
					</view>
					<!-- 		<view class="icon">
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view> -->
				</view>
			</view>
			<view class="btns">
				<!-- @click="getnav('/pages/reservation/choice')" -->
				<view class="btn" @click="getnav('/pages/reservation/choice')">
					<image class="bg" :src="`${baseImgUrl}home_btnBg.jpg`" mode="aspectFill"></image>
					<view class="tit">
						预约座位
					</view>
					<view class="text">
						跳转填写预约座位信息
					</view>
					<!-- 	<view class="icon">
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view> -->
				</view>
				<view class="btn" @click="getnav('/pages/manager/index')">
					<image class="bg" :src="`${baseImgUrl}home_btnBg.jpg`" mode="aspectFill"></image>
					<view class="tit">
						绑定人员
					</view>
					<view class="text">
						选择并绑定您对应的销售人员
					</view>
					<!-- 		<view class="icon">
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view> -->
				</view>
			</view>
			<view class="btns2">
				<view class="btn" @click="getnav('/pages/share/index')">
					<image class="bg" :src="`${baseImgUrl}btn2.png`" mode="aspectFill"></image>
					<view class="name">
						<view class="img">
							<image :src="`${baseImgUrl}btn1.png`" mode="widthFix"></image>
						</view>
						<text>分享有礼</text>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view>
				</view>
				<view class="btn" @click="getnav('/pages/mine/storingWine')">
					<image class="bg" :src="`${baseImgUrl}btn2.png`" mode="aspectFill"></image>
					<view class="name">
						<view class="img">
							<image :src="`${baseImgUrl}btn2.png`" mode="widthFix"></image>
						</view>
						<text>酒水寄存</text>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view>
				</view>

			</view>

		</view>
		<Tabbar :currentTab="0"></Tabbar>
		<userLogin ref="userLoginRef" />
	</view>
</template>

<script>
	import Tabbar from '../../components/tabbar.vue';
	import Header from '../../components/header.vue';
	import {
		bannerList
	} from '../../api/api';
	import {
		getWXStatusHeight,
		showToast
	} from '@/utils/index.js'

	export default {
		components: {
			Header,
			Tabbar,
		},
		data() {
			return {
				barHeight: 0, // 状态栏高度
				menuHeight: 0, // 状态栏 + 刘海高度
				bannerList: [
					'https://img0.baidu.com/it/u=1820622523,1497654983&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				current: 0, // 轮播当前值
				baseImgUrl: this.$baseImgUrl
			}
		},

		onLoad(option) {
			let obj = getWXStatusHeight()
			this.barHeight = obj.barHeight
			this.menuHeight = obj.menuHeight

console.log(obj,"obj");
			const isLogin = this.getIsLogin()
			if (isLogin) {
				this.getBannerList()
			}
		},
		methods: {
			// 扫码
			doScan(){
				const _this = this
				uni.scanCode({
					onlyFromCamera:true,
					success:function(res){
						_this.afterScanCode(res)
					}
				})
			},
			afterScanCode(res){
				this.$toast("扫码结果" + res.result)
				console.log(res,"resresres");
			},
			// 获取广告列表
			async getBannerList() {
				const res = await bannerList()
				this.bannerList = res.data.map(item => {
					return {
						...item,
						title: item.bannerTitle
					}
				})
			},
			// 获取登陆信息
			getIsLogin() {
				console.log(uni.getStorageSync('token'), "uni.getStorageSync('token')");
				if (!uni.getStorageSync('token')) {
					uni.setStorageSync('showLogin', true)
					this.$refs.userLoginRef.showLogin = true
					return false
				}
				return true
			},
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: 'ITC';
		src: url("http://1.92.107.135:8082/woff/BRADHITC.woff");
	}
	@font-face {
		font-family: "华文琥珀";
		src: url("http://1.92.107.135:8082/woff/STHUPO.woff");
	}

	@font-face {
		font-family: '华文细黑';
		src: url("http://1.92.107.135:8082/woff/STXIHEI.woff");
	}
	.bigBanner{
		image{
			margin-top: -20rpx;
			width: 100%;
		}
	}

	::v-deep .u-swiper__wrapper__item__wrapper__title {
		background: rgba(#fff, 0.5);
		font-size: 24rpx;
		text-align: center;
		color: #3f073f !important;
		font-family: '宋体';
		font-weight: bolder;
	}

	.swiperBox {
		height: 280px;
		position: relative;
	}

	.btns2 {
		margin-top: 20rpx;

		.btn {
			margin-bottom: 20rpx;
			padding: 25rpx 30rpx;
			background-color: #0e0d15;
			color: #fff;
			display: flex;
			justify-content: space-between;
			border-radius: 20rpx;
			font-family: "微软雅黑";
			font-weight: 900;
			position: relative;
			overflow: hidden;

			.bg {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;

				&::after {
					position: absolute;
					content: "";
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					z-index: 2;
					background: rgba(#000, 0.5);
				}
			}


			.name {
				display: flex;
				align-items: center;
				position: relative;
				z-index: 9;
			}

			.img {
				margin-right: 20rpx;
				position: relative;
				z-index: 9;

				image {
					width: 88rpx;
				}
			}

			.right {
				position: relative;
				z-index: 9;
				display: flex;
				align-items: center;
			}

		}
	}

	.btns {
		margin-top: 20rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 50rpx;

		.btn {
			background-color: #0f0d15;
			color: #fff;
			padding: 50rpx 30rpx;
			border-radius: 20rpx;
			position: relative;
			overflow: hidden;

			.bg {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;

				&::after {
					position: absolute;
					content: "";
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					z-index: 2;
					background: rgba(#000, 0.5);
				}
			}

			.icon {
				margin-top: 30rpx;
				display: flex;
				justify-content: flex-end;
				position: relative;
				z-index: 9;
			}



			.tit {
				text-align: center;
				font-size: 40rpx;
				margin-bottom: 20rpx;
				font-family: '华文琥珀';
				font-weight: bolder;
				color: #a8e45b;
				position: relative;
				z-index: 9;
			}


			.text {
				font-size: 26rpx;
				font-family: '华文细黑';
				position: relative;
				z-index: 9;
			}
		}
	}

	.actives {
		margin-top: 30rpx;
		display: flex;

		.active {
			width: 230rpx;
			margin-right: 30rpx;

			&:last-child {
				margin-right: 0;
			}

			text {
				color: #fff;
				font-size: 22rpx;
			}

			.img {
				width: 100%;
				height: 188rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.title {
		font-size: 36rpx;
		color: #fff;
		margin-top: 40rpx;
	}

	.content {
		padding: 20rpx 40rpx;
		padding-bottom: 150rpx;

		.title {
			font-family: 'ITC';
		}
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		.iconMsg {
			image {
				width: 200rpx;
			}
		}

		.name {
			color: #fff;
		}
	}

	.outBox {
		background-size: cover;
		min-height: 100vh;
		width: 100vw;

		.bg {
			position: fixed;
			height: 100vh;
			width: 100vw;
			left: 0;
			top: 0;
			z-index: -1;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>